<template>
	<view class="article">
		<view class="article_top">
			<view class="left">
				<view class="avatar">
					<template v-if="obj.user_id.length">
						
						<image :src="obj.user_id[0].avatar_file.url" mode="aspectFill"></image>
					</template>
					<template v-else>
						<image :src="obj.cover" mode="aspectFill"></image>
					</template>
					
				</view>
				<view class="right">
					<view class="user_name">
						<template v-if="obj.user_id.length">
							{{obj.user_id[0]?.nickname }}
						</template>
						<template v-else>
							外星人类
						</template>
						
					</view>
					<view class="time">
						<uni-dateformat :date="obj.publish_date " format="MM月dd hh:mm" :threshold="[60000,3600000*24*30]"></uni-dateformat>
					</view>
				</view>
			</view>
			<view class="look_over" @click="details(obj._id)">
				<view class="look_over_item" v-for="(item,index) in 3"></view>
			</view>
		</view>
		<view class="article_content">
			<view class="text">{{obj.content}}</view>
			<view class="cover">
				<view class="cover_item" v-for="item in 1" :key="item" @click="cover(obj.cover)">
					<image :src="obj.cover" mode="aspectFill"></image>
				</view>
			</view>
		</view>
		<view class="article_feedback">
			<view class="browse">
				<TnIcon name="share-square" :custom-style="style" />
				<text>{{obj.view_count || 0}}</text>
					
			</view>
			<view class="browse">
				<TnIcon name="message" :custom-style="style" />
				<text>{{obj.comment_count}}</text>
			</view>
			<view class="browse">
				<TnIcon name="floral" :custom-style="style" />
				<text>{{obj.like_count}}</text>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue';
import TnIcon from '@/uni_modules/tuniaoui-vue3/components/icon/src/icon.vue'
defineProps(['obj'])
	const style = {
	  fontSize: '40rpx',
	  color: '#ffffff',
	}
	const swiperData = ref([
	 
	])
	const cardSwiper = (e) => {
	  currentSwiperIndex.value = e.detail.current*1
	  console.log( e.detail.current);
	}
	
	const details = (id) => {
		uni.redirectTo({
			url:"/newpages/details/details?id="+id
		})
	}
	const cover = (src) => {
		let arrSrc = [src]
		uni.previewImage({
			urls: arrSrc,
			longPressActions: {
				itemList: ['发送给朋友', '保存图片', '收藏'],
				success: function(data) {
					console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
				},
				fail: function(err) {
					console.log(err.errMsg);
				}
			}
		});

	}
</script>

<style lang="scss" scoped>
.article {
	margin: 20rpx;
	padding: 20rpx;
	background-color: rgba(73, 73, 73, 0.5);
	border-radius: 15rpx;
	
	.article_top {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 670rpx;
		height: 90rpx;
		.left {
			display: flex;
			align-items: center;
			.avatar {
				width:90rpx;
				height:90rpx;
				border-radius: 50%;
				image {
					width: inherit;
					height: inherit;
				}
			}
			.right {
				margin-left: 10rpx;
				.user_name {
					font-size: 29rpx;
					color: #FFFFFF;
					font-family: MiSans,MiSans;
				}
				.time {
					font-size: 24rpx;
					color: #c9c9c9;
					font-family: MiSans,MiSans;
					margin-top: 10rpx;
				}
			}
		}
		.look_over {
			display: flex;
			align-items: center;
			justify-content: center;
			.look_over_item {
				width: 10rpx;
				height: 10rpx;
				background: #FFFFFF;
				border-radius: 50%;
				margin-right: 10rpx;
				&:last-child {
					margin: 0;
				}
			}
		}
	}
	.article_content {
		width: 100%;
		margin-top: 15rpx;
		.text {
			font-size: 32rpx;
			color: #FFFFFF;
			font-family: MiSans,MiSans;
		}
		.cover {
			margin-top: 20rpx;
			width: 100%;
			display: grid;
			grid-template-columns:repeat(3,1fr) ;
			gap: 20rpx;
			.cover_item {
				width: 210rpx;
				height: 210rpx;
				image {
					width: 100%;
					height:100%;
					border-radius: 10rpx;
				}
			}
		}
	}
	.article_feedback {
		display: flex;
		align-items: center;
		margin-top: 30rpx;
		.browse {
			display: flex;
			align-items: center;
			font-size: 28rpx;
			color: #FFFFFF;
			font-family: MiSans,MiSans;
			margin-right: 60rpx;
			text {
				margin-left: 10rpx;
			}
			
		}
	}
}
</style>